<template>
    <el-dialog :title="istitle == 'backupAddress' ? '备份地址' : '原地址'" :visible.sync="deitAddressOpen" width="50%"
        :before-close="closeAddressDelDialog">
        <template slot="title">
      <!-- 这里可以放置任何自定义的HTML或组件 -->
      <span v-if="istitle=='backupAddress'">备份地址</span>
      <span v-else-if="istitle=='originalAddress'">原地址</span>
      <span v-else>存储地址</span>
    </template>
        <div class="app-container">
            <el-form :model="queryParams" ref="queryForm" :inline="true">
                <el-form-item label="原地址" prop="title">
                    <el-input v-model="queryParams.filePath" placeholder="请输入查找内容" clearable style="width:400px" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                </el-form-item>
            </el-form>
            <el-row :gutter="10" class="mb8" ref="refbut">
                <el-col :span="1.5">
                    <el-button type="primary" plain icon="el-icon-folder-add" @click="openFile">打开文件</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="primary" plain icon="el-icon-back" @click="goBack">返回上一级</el-button>
                </el-col>
            </el-row>

            <el-table ref="table" v-loading="loading" :data="dataList" :height="400"
                @selection-change="handleSelectionChange" border stripe @select="select" :header-cell-class-name="cellClass"
                @cell-dblclick="celldblclickTap">
                <el-table-column type="selection" width="50" align="center" fixed="left" label="" />
                <el-table-column label="序号" sortable align="center" type="index" prop="id" />
                <el-table-column label="文件名称" prop="name" align="center" :show-overflow-tooltip="true" />
                <el-table-column label="文件大小" prop="size" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-button type="warning" size="mini" @click="sizeTap(scope.row)">查看文件大小</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="文件类型" prop="type" align="center" :show-overflow-tooltip="true" />
            </el-table>

            <div slot="footer" class="dialog-footer" style="text-align: right;margin-top:10px">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="closeAddressDelDialog">取 消</el-button>
            </div>
        </div>
    </el-dialog>
</template>
<script>
import { getRoute, getFileSize, checkSystem } from "@/api/cqbc/backupRestore/filebackup.js"
export default {
    props: ["deitAddressOpen", 'istitle'],
    data() {
        return {
            queryParams: {
                filePath: undefined
            },
            dataList: [],
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            items: [],
            isSystem: "",
        }
    },
    computed() {

    },
    created() {
        this.getRouteListPost();
        //返回时windows还是linux接口
        checkSystem().then(res => {
            this.isSystem = res.msg;
        })
    },
    methods: {
        cellClass(row) {   //vue table多选框的单选功能，禁用选择全部   
            if (row.columnIndex === 0) {
                return 'disabledCheck'
            }
        },
        handleQuery() {
            this.getRouteListPost();
        },

        //位置列表
        getRouteListPost() {
            getRoute(this.queryParams).then(res => {
                this.loading = false;
                this.dataList = res.data;
            })
        },
        closeAddressDelDialog() {
            this.$emit("closeAddressDelDialog")
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.items = selection;
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },


        //复选框单选
        select(selection, row) {
            this.$refs.table.clearSelection();
            // 判断selection是否有值存在
            if (selection.length === 0) return
            this.$refs.table.toggleRowSelection(row, true);
        },

        //打开文件
        openFile() {
            if (!this.multiple) {
                this.queryParams.filePath = this.items[0].name;
                this.getRouteListPost(this.queryParams);

            } else {
                this.$message({
                    message: '请选择一条数据哦!',
                    type: 'warning'
                });
            }
        },


        //双击打开文件
        celldblclickTap(row, column, cell, event) {
            console.log(row, column, cell, event)
            this.queryParams.filePath = row.name;
            this.getRouteListPost(this.queryParams);
        },

        //返回上一级
        goBack() {
            var that = this;
            // console.log(that.queryParams.filePath)
            if (that.queryParams.filePath != undefined) {
                if (that.isSystem == "linux") {
                    var ll = that.queryParams.filePath.substr(0, that.queryParams.filePath.lastIndexOf("/"))
                    if (that.queryParams.filePath == ll) {
                        that.queryParams.filePath = undefined
                    } else {
                        that.queryParams.filePath = ll;
                    }
                } else {
                    var i = "\\";
                    var ll = that.queryParams.filePath.substr(0, that.queryParams.filePath.lastIndexOf(i))
                    if (ll == "C:") {
                        ll = "C:" + i
                    }
                    if (ll == "D:") {
                        ll = "D:" + i
                    }
                    if (ll == "E:") {
                        ll = "E:" + i
                    }
                    if (ll == "F:") {
                        ll = "F:" + i
                    }

                    if (that.queryParams.filePath == ll) {
                        that.queryParams.filePath = undefined
                    } else {
                        that.queryParams.filePath = ll;
                    }
                }
                this.getRouteListPost(that.queryParams);
            }
        },

        //查看文件大小
        sizeTap(row) {
            var that = this;         
            getFileSize({
                filePath:row.name,
                isRootPath:row.isRootPath
            }).then(res => {
                this.$message({ message: res.msg, type: 'success' });
            })
        },

        //点击确定
        submitForm() {
            var val={
                istitle:this.istitle,
                filePath:this.queryParams.filePath
            }
            this.$emit("deitAddressSubmit",val)
        },
    }
}
</script>
<style lang="less" scoped>
/* 去掉全选按钮 */
/deep/ .el-table .disabledCheck .cell .el-checkbox__inner {
    display: none;
}

/deep/ .el-table .disabledCheck .cell::before {
    content: '选择';
    text-align: center;
    line-height: 37px;
}
</style>